<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.box{
				width: 500px;
				margin: 20px auto;
			}
			table{
				width: 100%;
				text-align: center;
			}
			.alert{
				width: 100%;
				position: fixed;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				display: none;
				background: rgba(120,120,120,0.5);
			}
			.con{
				width: 300px;
				line-height: 50px;
				background: white;
				border: solid 5px;
				margin: auto;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="top">
				<input type="text" name="" id="name" value="" />姓名
				<input type="text" name="" id="age" value="" />年龄
				<input type="radio" name="sex" value="男" checked/>男
				<input type="radio" name="sex" value="女" />女<br />
				<div class="checkeds">
					爱好：<input type="checkbox" name="" id="" class="checks" value="唱" />唱
					<input type="checkbox" name="" id="" class="checks" value="跳" />跳
					<input type="checkbox" name="" id="" class="checks" value="rap" />rap
					<input type="checkbox" name="" id="" class="checks" value="篮球" />篮球<br />
					<button onclick="addFun()">添加</button>
				</div>
			</div>
			<table border="1" cellspacing="0" cellpadding="0">
				<thead>
					<tr>
						<th>序号</th>
						<th>姓名</th>
						<th>年龄</th>
						<th>性别</th>
						<th>爱好</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<!--<tr>
						<td>Data</td>
						<td>Data</td>
						<td>Data</td>
						<td>Data</td>
						<td>Data</td>
						<td>Data</td>
					</tr>-->
				</tbody>
			</table>
		</div>
		<div class="alert">
			<div class="con">
				所选内容已删除!
				<button onclick="closeFun()">X</button>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var myName = document.getElementById('name')
		var age = document.getElementById('age')
		var sexs = document.getElementsByName('sex')
		var tbody = document.querySelector('tbody')
		var alert = document.querySelector('.alert')
		var arr
		if (localStorage.arr) {
			arr = JSON.parse(localStorage.arr)
			showFun()
		}else{
			arr = []
		}
		function addFun () {
			var checkeds = document.querySelectorAll('.checkeds input:checked')
			console.log(checkeds,length)
			if (myName.value == '' || age.value == '') {
				alert('信息不完整！')
				return
			}
			var sex
			for (let i=0; i<sexs.length; i++) {
				if (sexs[i].checked) {
					sex = sexs[i].value
				}
			}
			var aihao = ''
			for (let j=0; j<checkeds.length; j++) {
				if (checkeds.length > 1) {
					if (j == 0) {
						aihao += checkeds[j].value
					} else{
						aihao += (','+checkeds[j].value)
					}
				}else{
					aihao = checkeds[j].value
				}
			}
			
			var obj={
				id:+new Date,
				name:myName.value,
				age:age.value,
				sex:sex,
				aihao:aihao
			}
			arr.push(obj)
			localStorage.arr = JSON.stringify(arr)
			showFun()
		}
		function showFun () {
			var str = ''
			for (let i=0; i<arr.length; i++) {
				str += `<tr>
							<td>${i+1}</td>
							<td>${arr[i].name}</td>
							<td>${arr[i].age}</td>
							<td>${arr[i].sex}</td>
							<td>${arr[i].aihao}</td>
							<td>
								<button onclick="upFun(${i})">上移</button>
								<button onclick="delFun(${arr[i].id})">删除</button>
								<button onclick="downFun(${i})">下移</button>
							</td>
						</tr>`
			}
			tbody.innerHTML = str
			alert.style.display = 'none'
			jin()
		}
		function delFun(myid){
			for (let i=0; i<arr.length; i++) {
				if (arr[i].id == myid) {
					arr.splice(i,1)
					localStorage.arr = JSON.stringify(arr)
					showFun()
					alert.style.display = 'block'
				}
			}
		}
		function closeFun () {
			alert.style.display = 'none'
		}
		function jin () {
			var trs = document.querySelectorAll('tbody>tr')
			if (trs.length > 1) {
				tbody.firstElementChild.lastElementChild.firstElementChild.disabled = true
				tbody.lastElementChild.lastElementChild.lastElementChild.disabled = true
				
			}
		}
		function upFun (i) {
			if (i>0) {
				var t = arr[i]
				arr[i] = arr[i-1]
				arr[i-1] =t
			}
			localStorage.arr = JSON.stringify(arr)
			showFun()
		}
		function downFun (i) {
			if (i<arr.length-1) {
				var t = arr[i]
				arr[i] = arr[i+1]
				arr[i+1] =t
			}
			localStorage.arr = JSON.stringify(arr)
			showFun()
		}
	</script>
</html>
